@use 'design-system' as *;

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-collapse: collapse;

    @media screen and (max-width: $breakpoint-pricing-medium) {
        grid-template-columns: repeat(1, 1fr);
    }
}
.socialProof {
    --social-proof-bg: #fbfbfc;

    position: relative;
    line-height: var(--text-lh-base);
    background-color: var(--social-proof-bg);
    border-right: 1px solid var(--color-border-secondary);
    border-left: 1px solid var(--color-border-secondary);
    box-shadow:
        50vw 0 0 0 var(--social-proof-bg),
        -50vw 0 0 0 var(--social-proof-bg);

    #{$selector-darkmode} & {
        --social-proof-bg: color-mix(in srgb, var(--color-fg-primary), var(--color-bg-primary) 98%);
    }
}

.header {
    padding-bottom: $spacing-size-10;

    .cellsIllustration {
        margin-left: auto;
        left: 1px;
    }

    p,
    h3 {
        margin-right: $spacing-size-6;
        margin-left: $spacing-size-6;
    }

    p {
        margin-bottom: $spacing-size-2;
        font-weight: var(--text-semibold);
        color: var(--color-text-brand-primary);

        @media screen and (max-width: $breakpoint-pricing-medium) {
            padding-top: $spacing-size-16;
        }
    }
}

.quote {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: var(--text-fs-base);
    line-height: var(--text-lh-2xl);
    border: 1px solid var(--color-border-secondary);
    margin: -1px 0 0 -1px;
    padding: 24px;
    background-color: var(--color-bg-primary);

    @media screen and (max-width: $breakpoint-pricing-medium) {
        width: 100%;
    }

    &:first-child {
        padding: $spacing-size-6 $spacing-size-8 $spacing-size-6 $spacing-size-6;

        @media screen and (max-width: $breakpoint-pricing-medium) {
            border-bottom: 1px solid var(--color-border-secondary);
        }
    }

    &:last-child {
        padding: $spacing-size-6 $spacing-size-6 $spacing-size-6 $spacing-size-8;
    }

    blockquote p {
        margin-bottom: $spacing-size-6;
        text-indent: -0.5em;

        &::before {
            content: '“';
        }

        &::after {
            content: '”';
        }
    }

    footer {
        display: flex;
        align-items: flex-end;
    }

    footer > div {
        margin-left: $spacing-size-4;
    }
}

.avatar {
    width: $spacing-size-12;
    height: $spacing-size-12;
    border-radius: 50%;
    outline: 2px solid var(--color-util-brand-300);
    outline-offset: 4px;

    #{$selector-darkmode} & {
        outline: 2px solid var(--color-border-primary);
    }
}

.name {
    margin-bottom: 0;
}

.orgIcon {
    width: 36px;
    height: 36px;
    margin-left: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-primary);
}

.statsOuter {
    display: flex;
    justify-content: center;
    padding: $spacing-size-8;
    gap: $spacing-size-8;
    border: 1px solid var(--color-border-secondary);

    margin-top: $spacing-size-20;
    border-bottom: 1px solid var(--color-border-secondary);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);

    @media screen and (max-width: $breakpoint-pricing-medium) {
        flex-direction: column;
        align-items: center;
    }

    svg {
        stroke: var(--color-util-brand-500);
    }
    .stat {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;

        border-right: 1px solid var(--color-border-secondary);

        @media screen and (max-width: $breakpoint-pricing-medium) {
            border-right: none;

            h4 {
                width: fit-content;
                align-items: center;

                margin: 0 auto;
            }
            p {
                margin: 0 auto;
            }
        }

        &:last-child {
            border-right: none;
        }
    }
}
h4 {
    color: var(--color-text-secondary);
    display: flex;
    gap: $spacing-size-4;
    align-items: left;
    flex-direction: column;

    #{$selector-darkmode} & {
        color: var(--color-util-brand-900);
    }
}

h4 {
    color: var(--color-util-brand-500);
}
